<template>
  <div class="content-box">
    <div class="scroll-view-box">
      <el-button class="history-btn" @click="hisDrawer = true" size="small">历史记录</el-button>
      <div class="data-box-left">
        <div class="user-title-box" v-if="$fieldShowFunc('24-xmxx')">项目信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="项目名称" v-if="$fieldShowFunc('zgd_xmmc')">
            <div class="justify_7_5" slot="label">项目名称</div>
            {{ dataObj.project_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" v-if="$fieldShowFunc('zgd_xmbh')">
            <div class="justify_7_5" slot="label">项目编号</div>
            <el-button @click="goToProjectFunc" type="text" style="padding: 0;">{{ dataObj.project_number || '--'
            }}</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="验收节点" v-if="$fieldShowFunc('zgd_ysjd')">
            <div class="justify_7_5" slot="label">验收节点</div>
            {{ dataObj.node_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" v-if="$fieldShowFunc('zgd_xmpp')">
            <div class="justify_7_5" slot="label">项目品牌</div>
            {{ dataObj.brand_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" v-if="$fieldShowFunc('zgd_xmlx')">
            <div class="justify_7_5" slot="label">项目类型</div>
            {{ dataObj.store_type_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(1, 3, 0)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" v-if="$fieldShowFunc('24-zgdxx')">整改单信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="整改内容" v-if="$fieldShowFunc('zgd_zgnr')">
            <div class="justify_7_5" slot="label">整改内容</div>
            {{ dataObj.rectification_content || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="图片" v-if="$fieldShowFunc('zgd_tp')">
            <div class="justify_7_5" slot="label">图片</div>
            <div class="file-box-img-box flex ac">
              <template v-for="(file, idx) in dataObj.pending_rectification_files">
                <div class="file-box-img" :key="idx">
                  <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top">
                    <img @click="$fileViewHandle(file)" class="img" :src="$fileImgFunc(file)" />
                  </el-tooltip>
                </div>
              </template>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="整改区域" v-if="$fieldShowFunc('zgd_zgqy')">
            <div class="justify_7_5" slot="label">整改区域</div>
            <span v-if="dataObj.rectification_area == 1">前区</span>
            <span v-if="dataObj.rectification_area == 2">后区</span>
            <span v-if="dataObj.rectification_area == 3">仓库</span>
          </el-descriptions-item>
          <el-descriptions-item label="整改类型" v-if="$fieldShowFunc('zgd_zglx')">
            <div class="justify_7_5" slot="label">整改类型</div>
            <span v-if="dataObj.rectification_type == 1">水电</span>
            <span v-if="dataObj.rectification_type == 2">吊顶</span>
            <span v-if="dataObj.rectification_type == 3">门头</span>
          </el-descriptions-item>
          <el-descriptions-item label="是否影响开业" v-if="$fieldShowFunc('zgd_sfyxky')">
            <div class="justify_7_5" slot="label">是否影响开业</div>
            {{ dataObj.is_affect_opening == 1 ? '是' : '否' }}
          </el-descriptions-item>
          <el-descriptions-item label="限期整改日期" v-if="$fieldShowFunc('zgd_xqzgsj')">
            <div class="justify_7_5" slot="label">限期整改日期</div>
            {{ dataObj.deadline_rectification || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="已整改描述" v-if="$fieldShowFunc('zgd_yzgms')">
            <div class="justify_7_5" slot="label">已整改描述</div>
            {{ dataObj.rectification_description || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="已整改照片/视频" v-if="$fieldShowFunc('zgd_yzgzpsp')">
            <div class="justify_7_5" slot="label">已整改照片/视频</div>
            <span v-if="!dataObj.rectified_files || !dataObj.rectified_files.length">--</span>
            <div class="file-box-img-box flex ac" v-if="dataObj.rectified_files && dataObj.rectified_files.length">
              <template v-for="(file, idx) in dataObj.rectified_files">
                <div class="file-box-img" :key="idx">
                  <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top">
                    <img @click="$fileViewHandle(file)" class="img" :src="$fileImgFunc(file)" />
                  </el-tooltip>
                </div>
              </template>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="整改结果" v-if="$fieldShowFunc('zgd_zgjg')">
            <div class="justify_7_5" slot="label">整改结果</div>
            <span v-if="dataObj.rectification_status == 10">待整改</span>
            <span v-if="dataObj.rectification_status == 20">审核中</span>
            <span v-if="dataObj.rectification_status == 30">已完成</span>
          </el-descriptions-item>
          <el-descriptions-item label="整改完成时间" v-if="$fieldShowFunc('zgd_zgwcsj')">
            <div class="justify_7_5" slot="label">整改完成时间</div>
            {{ dataObj.completion_at || '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(1, 3, 1)" :key="key"></el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 提交区域 -->
    <div class="examine-box" v-if="isSubmit">
      <div class="examine-title">提交区域</div>
      <el-form :model="tjRuleForm" :rules="tjRules" ref="tjRuleForm" label-position="top">
        <el-form-item label="整改内容" prop="rectification_description">
          <el-input :rows="4" type="textarea" v-model="tjRuleForm.rectification_description" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="整改文件 (.jpg,.png,.gif)" prop="rectification_file">
          <div class="file-list-box">
            <el-upload accept="image/*" multiple class="avatar-uploader" action="#" :show-file-list="false"
              :auto-upload="false" list-type="picture-card" :on-change="dkrzFileChange">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="file-item-box" v-for="(item, index) in tjRuleForm.rectification_file" :key="index">
              <div class="el-icon-delete-box" @click="dkrzFileRemove(index)">
                <i class="el-icon-error"></i>
              </div>
              <el-tooltip class="item" effect="dark" :content="item.name || item.file_name" placement="top">
                <img class="img" :src="$fileImgFunc(item)" />
              </el-tooltip>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="form-btn">
            <el-button type="primary" @click="tjSubmit('tjRuleForm')" :loading="diaLoading">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 审核区域 -->
    <div class="examine-box" v-if="isExamine">
      <div class="examine-title">审核区域</div>
      <el-form :model="shFormInline">
        <el-form-item label="是否通过" style="margin-bottom: 0px">
          <el-radio-group v-model="shFormInline.radio">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--  v-if="shFormInline.radio == 2" -->
        <el-form-item label="">
          <el-input :rows="4" type="textarea" v-model="shFormInline.desc" placeholder="审批意见"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="form-btn">
            <el-button type="primary" @click="shSubmitFunc" :loading="diaLoading">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 历史弹窗 -->
    <el-drawer @close="hisDrawer = false" title="历史记录" :visible.sync="hisDrawer" :with-header="false" size="600px">
      <div class="right-box">
        <div class="title-box flex ac fw" style="margin: 20px 0 0 10px">历史记录</div>
        <el-timeline class="timeline">
          <template v-if="!logList.length">
            <el-empty description="无历史数据"></el-empty>
          </template>
          <el-timeline-item v-for="(item, index) in logList" :key="index">
            <div class="setp-box">
              <div class="setp-top flex ac jb">
                <p class="time">{{ item.updated_at || '--' }}</p>
                <div class="user-box flex ac">
                  <img class="avater" :src="item.handlers_image" />
                  {{ item.handlers_name + "-" + item.handlers_position }}
                </div>
              </div>
              <div class="setp-content">
                <div class="title">
                  {{ item.content }}
                </div>
                <!-- 工程监理发起整改单 -->
                <template v-if="item.status == 3100">
                  <div class="content-table">
                    <div class="flex jb fw">
                      <div class="table-item width-50" v-if="$fieldShowFunc('zgd_zgnr')">
                        <span class="table-item-title history_justify_6">整改内容</span>
                        <span class="table-item-content">{{
                          item.form_data.rectification_content || "--"
                        }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('zgd_zgqy')">
                        <span class="table-item-title history_justify_6">整改区域</span>
                        <span class="table-item-content">
                          <span v-if="item.form_data.rectification_area == 1">前区</span>
                          <span v-if="item.form_data.rectification_area == 2">后区</span>
                          <span v-if="item.form_data.rectification_area == 3">仓库</span>
                          <span v-if="!item.form_data.rectification_area">--</span>
                        </span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('zgd_zglx')">
                        <span class="table-item-title history_justify_6">整改类型</span>
                        <span class="table-item-content">
                          <span v-if="item.form_data.rectification_type == 1">水电</span>
                          <span v-if="item.form_data.rectification_type == 2">吊顶</span>
                          <span v-if="item.form_data.rectification_type == 3">门头</span>
                          <span v-if="!item.form_data.rectification_type">--</span>
                        </span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('zgd_sfyxky')">
                        <span class="table-item-title history_justify_6">是否影响开业</span>
                        <span class="table-item-content">
                          {{
                            item.form_data.is_affect_opening == 1 ? '是' : '否'
                          }}
                        </span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('zgd_xqzgsj')">
                        <span class="table-item-title history_justify_6">限期整改日期</span>
                        <span class="table-item-content">
                          {{
                            item.form_data.deadline_rectification || "--"
                          }}
                        </span>
                      </div>
                      <div class="table-item fw" v-if="$fieldShowFunc('zgd_tp')">
                        <span class="table-item-title history_justify_6">图片</span>
                        <div class="img-list-box flex ac fw">
                          <template v-for="(file, index) in item.form_data.rectification_file">
                            <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top"
                              :key="index">
                              <img @click="$fileViewHandle(file)" class="img" :src="$fileImgFunc(file)" />
                            </el-tooltip>
                          </template>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <!-- 工程经理上传整改内容 -->
                <template v-if="item.status == 3105">
                  <div class="content-table">
                    <div class="flex jb fw">
                      <div class="table-item fw" v-if="$fieldShowFunc('zgd_yzgms')">
                        <span class="table-item-title  history_justify_6">已整改描述</span>
                        <span class="table-item-content">{{
                          item.form_data.rectification_description || "--"
                        }}</span>
                      </div>
                      <div class="table-item fw width-50" v-if="$fieldShowFunc('zgd_tp')">
                        <span class="table-item-title  history_justify_6">图片</span>
                        <div class="img-list-box flex ac fw">
                          <template v-for="(file, index) in item.form_data.rectification_file">
                            <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top"
                              :key="index">
                              <img @click="$fileViewHandle(file)" class="img" :src="$fileImgFunc(file)" />
                            </el-tooltip>
                          </template>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <!-- 工程监理审核-不通过 -->
                <template v-if="item.status == 3110">
                  <div class="content-table">
                    <div class="flex jb fw">
                      <div class="table-item fw">
                        <span class="table-item-title history_justify_6">审批意见</span>
                        <span class="table-item-content">{{
                          item.form_data.reason_refusal || "--"
                        }}</span>
                      </div>
                    </div>
                  </div>
                </template>
                <!-- 工程监理审核-通过 -->
                <template v-if="item.status == 3115">
                  <div class="content-table">
                    <div class="flex jb fw">
                      <div class="table-item fw">
                        <span class="table-item-title history_justify_6">审批意见</span>
                        <span class="table-item-content">{{
                          item.form_data.reason_refusal || "--"
                        }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import rectificationApi from '@/api/rectificationApi';

export default {
  name: 'rectificationFormDetailPage',
  data() {
    var fileRules = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error("请上传整改附件"));
      } else {
        callback();
      }
    };
    return {
      // 提交整改信息
      isSubmit: false,
      tjRuleForm: {
        rectification_description: "",
        rectification_file: [],
      },
      tjRules: {
        rectification_file: [
          { required: true, validator: fileRules, trigger: "change" },
        ],
        rectification_description: [{ required: true, message: "请输入内容", trigger: "change" }],
      },

      // 审核
      shFormInline: {
        radio: 1,
        desc: '',
      },
      diaLoading: false,
      isExamine: false,

      zjxPrice: false,
      cbPrice: false,
      logList: [],
      dataObj: '',
      hisDrawer: false,
    };
  },
  computed: {

  },
  mounted() {
    this.isSubmit = this.$route.query.submit || false;
    this.isExamine = this.$route.query.examine || false;
    this.getRectificationDetails();
  },
  methods: {
    // 整改单详情
    getRectificationDetails() {
      if (!this.$route.query.id) return;
      rectificationApi.getRectificationDetails({
        rectification_id: this.$route.query.id
      }).then(res => {
        console.log(res, "整改单详情")
        if (res.code == 200) {
          res.data.log_list.forEach(item => {
            item.form_data = JSON.parse(item.form_data);
          })
          this.logList = res.data.log_list || [];
          this.dataObj = res.data;
        }
      })
    },
    // 提交
    tjSubmit(formName) {
      let tjRuleForm = this.tjRuleForm;
      console.log(tjRuleForm, "参数");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formdata = new FormData();
          formdata.append('data', JSON.stringify({
            rectification_id: this.$route.query.id,
            rectification_description: tjRuleForm.rectification_description
          }))
          tjRuleForm.rectification_file.forEach(item => {
            formdata.append('rectification_file[]', item.raw);
          })
          this.submitRectification(formdata);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 提交整改
    submitRectification(obj) {
      this.diaLoading = true;
      rectificationApi.submitRectification(obj).then(res => {
        console.log(res, "提交整改")
        this.diaLoading = false;
        if (res.code == 200) {
          this.getRectificationDetails();
          this.isSubmit = false;
          this.$router.push({
            path: '/rectificationFormDetailPage',
            query: {
              id: this.$route.query.id,
            }
          })
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    //选择文件
    dkrzFileChange(file, list, type) {
      console.log(file, list, type);
      this.tjRuleForm.rectification_file = list;
      this.$refs.tjRuleForm.validateField('rectification_file');
    },
    // 删除文件
    dkrzFileRemove(index) {
      this.tjRuleForm.rectification_file.splice(index, 1);
      this.$refs.tjRuleForm.validateField('rectification_file');
    },
    // 审核
    // 审核整改单
    shSubmitFunc() {
      let shFormInline = this.shFormInline;
      switch (shFormInline.radio) {
        case 1:
          this.rectificationPassed({
            rectification_id: this.$route.query.id,
            reason_refusal: shFormInline.desc || ''
          })
          break;
        case 2:
          if (!shFormInline.desc) {
            this.$message.warning("请输入审批意见");
            return;
          }
          this.rectificationRejected({
            rectification_id: this.$route.query.id,
            reason_refusal: shFormInline.desc
          })
          break;
        default:
      }
    },
    // 通过整改单申请
    rectificationPassed(obj) {
      this.shLoading = true;
      rectificationApi.rectificationPassed(obj).then(res => {
        console.log(res, "通过整改单申请")
        this.shLoading = false;
        if (res.code == 200) {
          this.getRectificationDetails();
          this.isExamine = false;
          this.$router.push({
            path: '/rectificationFormDetailPage',
            query: {
              id: this.$route.query.id,
            }
          })
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 拒绝整改单申请
    rectificationRejected(obj) {
      this.shLoading = true;
      rectificationApi.rectificationRejected(obj).then(res => {
        console.log(res, "拒绝整改单申请")
        this.shLoading = false;
        if (res.code == 200) {
          this.getRectificationDetails();
          this.isExamine = false;
          this.$router.push({
            path: '/rectificationFormDetailPage',
            query: {
              id: this.$route.query.id,
            }
          })
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 去项目详情
    goToProjectFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/projectDetailNew',
        query: {
          id: this.dataObj.project_id
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import '@/styles/detail.scss';
</style>
<style lang="scss">
.labelClassName {
  width: 160px;
  background: #f5f8fe !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.contentClassName {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
}

.labelClassName2 {
  width: 160px;
  background: rgba(0, 0, 0, 0) !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
}

.contentClassName2 {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
  border: none !important;
}
</style>